<template>
  <div>
    <van-tabs v-model:active="active">
      <van-tab title="同城">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item v-for="item in localPlan" :name="item.name">
            <template #title>
              <div class="normal_title">
                <van-checkbox v-model="item.checked" style="font-size: large"/>
                <div style="margin-left: 10px;">{{ item.name }}</div>
                <img src="@/assets/img/auto.png" width="24" height="24" style="margin-left: 20px;"
                     @click.stop="deleteLocal(item)">
              </div>
            </template>
            <van-cell title="订单类型" :value="item.orderType"/>
            <van-cell title="订单价格" :value="item.minPrice+' 至 '+item.maxPrice+' 元'"/>
            <van-cell title="出行日期" :value="item.minDate+' 至 '+item.maxDate"/>
            <van-cell title="出行时间" :value="item.minTime+' 至 '+item.maxTime"/>
            <van-cell title="拼单人数" :value="item.minPeople+' 至 '+item.maxPeople +' 人'"/>
            <van-cell title="接人路程" :value="'不超过'+item.maxStartDistance+' 公里 '"/>
            <van-cell title="乘客评分" :value="'不低于'+item.minScore"/>
            <van-cell title="最低单价" :value="'不低于'+item.minPerPrice+' 元'"/>
          </van-collapse-item>
        </van-collapse>
      </van-tab>
      <van-tab title="跨城">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item v-for="item in crossPlan" :name="item.name">
            <template #title>
              <div class="normal_title">
                <van-checkbox v-model="item.checked" style="font-size: large"/>
                <div style="margin-left: 10px;">{{ item.name }}</div>
                <img src="@/assets/img/auto.png" width="24" height="24" style="margin-left: 20px;"
                     @click.stop="deleteLocal(item)">
              </div>
            </template>
            <van-cell title="订单类型" :value="item.orderType"/>
            <van-cell title="订单价格" :value="item.minPrice+' 至 '+item.maxPrice+' 元'"/>
            <van-cell title="出行日期" :value="item.minDate+' 至 '+item.maxDate"/>
            <van-cell title="出行时间" :value="item.minTime+' 至 '+item.maxTime"/>
            <van-cell title="拼单人数" :value="item.minPeople+' 至 '+item.maxPeople +' 人'"/>
            <van-cell title="接人路程" :value="'不超过'+item.maxStartDistance+' 公里 '"/>
            <van-cell title="乘客评分" :value="'不低于'+item.minScore"/>
            <van-cell title="最低单价" :value="'不低于'+item.minPerPrice+' 元'"/>
            <van-cell title="终点地方" :value="item.whiteList?item.whiteList:'所有城市'"/>
          </van-collapse-item>
        </van-collapse>
      </van-tab>
      <van-tab title="顺路">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item v-for="item in sameWayPlan" :name="item.name">
            <template #title>
              <div class="normal_title">
                <van-checkbox v-model="item.checked" style="font-size: large"/>
                <div>{{ item.name }}</div>
              </div>
            </template>
            <van-cell title="最低顺路" :value="item.minSame+'%'"/>
            <van-cell title="订单价格" :value="item.minPrice+' 至 '+item.maxPrice+' 元'"/>
            <van-cell title="出行日期" :value="item.minDate+' 至 '+item.maxDate"/>
            <van-cell title="出行时间" :value="item.minTime+' 至 '+item.maxTime"/>
            <van-cell title="拼单人数" :value="item.minPeople+' 至 '+item.maxPeople +' 人'"/>
            <van-cell title="接人路程" :value="'不超过'+item.maxStartDistance+' 公里 '"/>
            <van-cell title="送人路程" :value="'不超过'+item.maxEndDistance+' 公里 '"/>
            <van-cell title="乘客评分" :value="'不低于'+item.minScore"/>
            <van-cell title="最低单价" :value="'不低于'+item.minPerPrice+' 元'"/>
          </van-collapse-item>
        </van-collapse>
      </van-tab>
    </van-tabs>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="加方案" @click="navAdd"/>
      <van-action-bar-button type="warning" text="同城" @click="start('同城')"/>
      <van-action-bar-button type="danger" text="跨城" @click="start('跨城')"/>
      <van-action-bar-button type="danger" text="顺路" @click="start('顺路')"/>
    </van-action-bar>
  </div>
</template>
<script>
import store from '../store/index'

export default {
  data() {
    return {
      activeName: '1',
      localPlan: [],
      crossPlan: [],
      sameWayPlan: [],
      allPlan: []
    }
  },
  mounted() {
    this.loadPlans()
  },
  methods: {
    loadPlans() {
      let plans = store.state.plans
      this.allPlan = []
      this.allPlan.push(...plans)
      this.localPlan = [];
      this.crossPlan = [];
      this.sameWayPlan = [];
      this.allPlan.forEach(item => {
        if (item.listType === '同城') {
          this.localPlan.push(item)
        } else if (item.listType === '跨城') {
          this.crossPlan.push(item)
        } else if (item.listType === '顺路') {
          this.sameWayPlan.push(item)
        }
      });
    },
    start(type) {
      let params = {}
      params.type = type;
      let planList = [];
      if (type === '同城') {
        this.getCheckedPlan(this.localPlan, planList)
      } else if (type === '跨城') {
        this.getCheckedPlan(this.crossPlan, planList)
      } else if (type === '顺路') {
        this.getCheckedPlan(this.sameWayPlan, planList)
      }
      if (planList.length === 0) {
        alert("没有选中的方案")
        return
      }
      params.plans = planList;
      let save = bridge.saveWebParams(JSON.stringify(params))
      if (save) {
        bridge.execAj('toast("保存成功")');
        bridge.finish()
      } else {
        bridge.execAj('toast("保存失败")');
      }
    },
    getCheckedPlan(src, dist) {
      src.forEach(item => {
        if (item.checked) {
          dist.push(item)
        }
      })
    },
    navAdd() {
      console.log("666")
      this.$router.push("/Add")
    },
    deleteLocal(plan) {
      store.commit('deletePlan', plan)
      this.loadPlans()
    },
    stop() {
      auto.invoke('robotStop', [], () => {
      })
    }
  }
};

</script>
<style scoped>
.checked_title {
  padding-left: 16px;
  padding-top: 20px;
  padding-bottom: 2px;
  color: #ca1c1c;
}

.normal_title {
  display: flex;
  font-size: larger;
  font-weight: bold;
  color: #222222;
  align-items: center;
}

.filed {
  font-size: large;
}

.type_radio {
  font-size: large;
  padding-top: 20px;
  padding-left: 12px;
}
</style>